<template>
  <div class="page-container">
    <div class="page-header">
      <h1>帮助中心</h1>
      <p class="subtitle">获取您需要的支持和帮助</p>
    </div>

    <div class="content-section">
      <div class="help-category">
        <h2>常见问题</h2>
        <div class="faq-item" v-for="(faq, index) in faqs" :key="index">
          <h3>{{ faq.question }}</h3>
          <p>{{ faq.answer }}</p>
        </div>
      </div>

      <div class="help-category">
        <h2>联系支持</h2>
        <p>如需更多帮助，请通过以下方式联系我们：</p>
        <ul class="contact-list">
          <li><strong>电子邮件：</strong> support@employeesystem.com</li>
          <li><strong>电话：</strong> 400-123-4567</li>
          <li><strong>工作时间：</strong> 周一至周五 9:00-18:00</li>
        </ul>
      </div>

      <div class="help-category">
        <h2>视频教程</h2>
        <div class="tutorial-list">
          <div class="tutorial-item" v-for="(tutorial, index) in tutorials" :key="index">
            <div class="tutorial-image"></div>
            <div class="tutorial-info">
              <h3>{{ tutorial.title }}</h3>
              <p>{{ tutorial.description }}</p>
              <span class="tutorial-duration">{{ tutorial.duration }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelpCenter',
  data() {
    return {
      faqs: [
        {
          question: '如何创建新员工账户？',
          answer: '管理员可以在员工管理页面点击"添加员工"按钮，填写必要信息后提交即可创建新的员工账户。'
        },
        {
          question: '如何导出员工数据？',
          answer: '在员工管理页面，点击右上角的"导出Excel"按钮，系统将自动生成并下载员工数据的Excel文件。'
        },
        {
          question: '忘记密码怎么办？',
          answer: '请联系系统管理员重置您的密码。管理员可以在用户管理界面为您重新设置密码。'
        },
        {
          question: '如何查看和管理培训记录？',
          answer: '点击顶部导航栏中的"培训记录"选项，即可查看、添加、编辑和删除培训记录。'
        },
        {
          question: '如何进行绩效考核？',
          answer: '在"绩效考核"页面，您可以为员工创建新的考核记录，填写评分和反馈，并可以导出考核结果。'
        }
      ],
      tutorials: [
        {
          title: '员工管理系统入门指南',
          description: '了解系统基本功能和操作流程',
          duration: '10:25'
        },
        {
          title: '如何有效管理员工信息',
          description: '学习高效组织和维护员工数据',
          duration: '8:15'
        },
        {
          title: '绩效考核模块详解',
          description: '掌握绩效评估和数据分析功能',
          duration: '12:40'
        },
        {
          title: '培训记录管理教程',
          description: '了解如何跟踪和记录员工培训情况',
          duration: '7:55'
        }
      ]
    }
  }
}
</script>

<style scoped>
.page-container {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: var(--app-secondary-text);
  margin-top: 0;
}

.content-section {
  display: grid;
  gap: 40px;
}

.help-category {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--app-card-shadow);
}

.help-category h2 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-border-color);
}

.faq-item {
  margin-bottom: 24px;
}

.faq-item h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--el-color-primary);
}

.faq-item p {
  margin: 0;
  line-height: 1.6;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list li {
  margin-bottom: 12px;
  line-height: 1.6;
}

.tutorial-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tutorial-item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tutorial-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tutorial-image {
  height: 160px;
  background-color: #f5f5f7;
  background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6), 
                    linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.tutorial-info {
  padding: 16px;
}

.tutorial-info h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
}

.tutorial-info p {
  font-size: 14px;
  color: var(--app-secondary-text);
  margin: 0 0 12px 0;
}

.tutorial-duration {
  font-size: 12px;
  color: var(--app-accent-color);
  background: rgba(0, 113, 227, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .tutorial-list {
    grid-template-columns: 1fr;
  }
}
</style> 